<template>
  <div class="tableContainer">
    <div class="divFont">
      学员列表
    </div>
  <el-table
    ref="multipleTable"
    :data="arr"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :header-cell-style="{
    'background-color': '#f5f5f5',
    }">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="用户ID"
      width="120">
      <template slot-scope="scope">{{ scope.row.id }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="微信昵称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="会员手机"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      label="消费金额"
      show-overflow-tooltip width="120">
      <template slot-scope="scope">$ {{ scope.row.payMoney }}</template>
    </el-table-column>
    <el-table-column
      prop="num"
      label="订单数量"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="classData"
      label="会员等级"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="payData"
      label="上次消费时间"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      label="禁用账户"
      show-overflow-tooltip
      >
      <template slot-scope="scope">
        <el-tooltip :content="'Switch value: ' + scope.row.value" placement="top">
        <el-switch
            v-model="scope.row.value"
            active-color="#ea1a41"
            inactive-color="#b5b5b5"
            active-value=true
            inactive-value=false>
        </el-switch>
      </el-tooltip>
      </template>
      
    </el-table-column>
        <el-table-column
      label="操作"
      show-overflow-tooltip
      >
        <template slot-scope="scope">
        <el-button type="primary" @click="batchSelection(scope.row)">编辑</el-button>
        <el-button type="info" @click="delSelection(scope.row.id)">删除</el-button></template>
    </el-table-column>
  </el-table>
  </div>
  
</template>

<script>
import {delData,batchData} from '../../../api/teacherHome'
import Bus from '../../../utils/Bus'
export default {
  mounted() {
    Bus.$on('batchData',this.batchTeacherdata)
  },
  beforeDestroy() {
    Bus.$off('batchData',this.batchTeacherdata)
  },
  props:['arr'],
  data() {
      return {
        multipleSelection: [],
        value: false
      }
    },
    methods: {
      batchSelection(val){
        this.$emit('parentopen',val)
      },
      changeSwitch(){
        console.log(111)
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      batchTeacherdata(){
      let ids =''
      if(this.multipleSelection.length>0){
        this.multipleSelection.forEach(item=>{
          ids += item.id +','
        })
       }
       ids = ids.slice(0,ids.length-1)
        batchData({ ids }).then(res=>{
          if(res.code==200){
            this.$parent.getData()

          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      delSelection(id){
        console.log(id)
        delData({ id:id }).then(res=>{
          console.log(res)
          if(res.code ==200){
            this.$emit('resetFn')
          }
        })
      },
      
    }
}
</script>

<style lang="less" scoped>
  .tableContainer{
    background-color: white;
    margin-top: 20px;
    padding:0px 30px;
    box-sizing: border-box;
    /deep/.is-leaf {
      font-weight: bold;
      color: #333333;
      font-size: 15px;
    }
  }
  .divFont{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding: 18px 0px;
    box-sizing: border-box;
  }
</style>